<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
        <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import mitt from '@/utils/mitt'

defineOptions({
  name: 'DkBreadcrumb'
})

const route = useRoute()
const router = useRouter()
const levelList = ref([])

// 监听路由变化
watch(
  () => route,
  () => {
    getBreadcrumb()
  },
  { deep: true }
)

// 替换面包屑
const replaceBreadCrumb = (menuList, matched) => {
  // 这里递归去改变面包屑名称
  for (let index = 0; index < menuList.length; index++) {
    for (let i = 0; i < matched.length; i++) {
      if (menuList[index].path === matched[i].path) {
        matched[i].meta = menuList[index].meta
        if (menuList[index].children !== undefined) {
          const children = menuList[index].children
          if (children.length > 0) {
            replaceBreadCrumb(menuList[index].children, matched)
          }
        }
      }
    }
  }
  return matched
}

// 判断是否为仪表盘路由
const isDashboard = (route) => {
  const name = route && route.name
  if (!name) {
    return false
  }
  return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
}

// 路径参数替换
const resolvePath = (path) => {
  // 处理带有路径参数的路由
  if (path.includes(':')) {
    const pathSegments = path.split('/')
    const routePathSegments = route.path.split('/')

    // 确保两个路径段数相同
    if (pathSegments.length === routePathSegments.length) {
      return pathSegments
        .map((segment, index) => {
          // 如果是参数部分，用实际路由中的值替换
          if (segment.startsWith(':')) {
            return routePathSegments[index]
          }
          return segment
        })
        .join('/')
    }
  }

  // 如果没有参数或格式不匹配，直接返回原路径
  return path
}

// 处理链接点击
const handleLink = (item) => {
  const { redirect, path } = item
  if (redirect) {
    router.push(redirect)
    return
  }

  // 使用resolvePath处理带参数的路径
  const resolvedPath = resolvePath(path)
  router.push(resolvedPath)
}

// 获取面包屑数据
const getBreadcrumb = () => {
  // only show routes with meta.title
  const matched = route.matched.filter((item) => item.meta && item.meta.title)
  const menuLists = []
  const _matched = replaceBreadCrumb(menuLists, matched)
  levelList.value = _matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false)

  setTimeout(() => {
    mitt.emit('getLevelList', levelList.value)
  }, 1)
}

// 组件挂载时初始化面包屑
onMounted(() => {
  getBreadcrumb()
})
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>
